<div id="user_management" v-cloak>
	<div class="operation">
        <Row type="flex" >
            <i-col offset="2">
                <i-button type="primary" icon="plus-round" @click="modal1=true">
                    添加用户
                </i-button>
                <Modal
                    v-model="modal1"
                    title="添加用户"
                    :mask-closable="false"
                    @on-ok="verifyAndAddUser"
                    @on-cancel="cancel">
                    <p class="login-font">车主姓名</p>
                    <i-input 
                        type="text"
                        v-model="user.name"
                        placeholder="请输入姓名">
                    </i-input>
                    <p class="login-font"><Icon type="ios-medical" color="red"></Icon>车牌号</p>
                    <i-input 
                        type="text"
                        v-model="user.truckid"
                        placeholder="请输入车牌号">
                    </i-input>
                    <p class="login-font"><Icon type="ios-medical" color="red"></Icon>联系方式</p>
                    <!-- <auto-complete 
                        :on-change="getSearchList" 
                        v-model.trim="user.phone" 
                        placeholder="请输入手机号，登录时使用"> -->
                        <!--显示电话号码列表 -->
                        <!-- <div>
                            <i-option v-for="option in searchItems" :value="option" :key="option">
                                <p class="Track">
                                    <span> {{ option }} </span>
                                </p>
                            </i-option>
                        </div> -->
                    <!-- </auto-complete> -->
                    <i-input 
                        type="text"
                        v-model="user.phone"
                        placeholder="请输入手机号，登录时使用">
                    </i-input>
                    <p class="login-font"><Icon type="ios-medical" color="red"></Icon>密码</p>
                    <i-input 
                        type="password" 
                        v-model.trim="user.password" 
                        placeholder="6-20位字符，不能包含空格">
                    </i-input>
                    <p class="login-font"><Icon type="ios-medical" color="red"></Icon>确认密码</p>
                    <i-input 
                        type="password" 
                        v-model.trim="user.check" 
                        placeholder="请与上次密码保持一致">
                    </i-input>
                    <p class="login-font">身份证号</p>
                    <i-input 
                        type="text" 
                        v-model="user.identity" 
                        placeholder="请输入身份证号">
                    </i-input>
                    <p class="login-font">年龄</p>
                    <i-input 
                        type="text" 
                        v-model="user.age" 
                        placeholder="请输入年龄">
                    </i-input>
                    <p class="login-font">性别</p>
                    <i-select v-model="user.sex" placeholder="请选择性别">
                        <i-option v-for="item in sexList" :value="item.value" :key="item.value">
                            {{ item.label }}
                        </i-option>
                    </i-select>
                    <p>注：<span style="color: red;">*</span>为必填项</p>
                </Modal>
            </i-col>
            <i-col span="4" offset="8">
                <auto-complete :on-change="getSearchList" v-model.trim="phone" placeholder="请输入手机号">
                	<div>
                	    <i-option v-for="option in searchItems" :value="option" :key="option">
                	        <p class="Track">
                	            <span> {{ option }} </span>
                	        </p>
                	    </i-option>
                	</div>
                </auto-complete>
            </i-col>
            <i-col>
                <i-button type="primary" icon="ios-search" @click="getSearchTruck" style="margin-right:5px;">
                    搜索
                </i-button>
            </i-col>
            <i-col>
                <i-button type="primary" @click="getAllUser" style="margin-right:5px;">显示全部</i-button>
            </i-col>
            <i-col>
                <i-button type="primary" @click="exportData" style="margin-right:5px;">
                    <Icon type="ios-download-outline"></Icon>一键导出
                </i-button>
            </i-col>
        </Row>
    </div>
    <div class="truck-table" id="scroll">
        <i-table :loading="loading" :stripe="true" :columns="truckCl" :data="historyData" :border="true" height="800" ref="table">
        </i-table>
        <Row type="flex" justify="center">
            <div style="float: right;">
                <Page ref="pages" :total="truckCount" :page-size="pageSize" show-total show-elevator :current="1" @on-change="changePage">
                </Page>
            </div>
        </Row>
    </div>
</div>
<script type="text/javascript" src="JS/page/user/user_management.js"></script>
<style>
    .ivu-modal {
        top: 200px;
    }
    .login-font{
    	font-size: 15px;
    }
    .ivu-col-offset-2 
    {
        /*margin-left: -71.666667%; */
    }
    .ivu-col-offset-2
    {
        margin-left: 1.333333%;
    }
    .ivu-col-offset-8 
    {
        margin-left: 22.333333%;
    }
    .ivu-modal 
    {
        /*width: 520px;*/
        top: 100px;
        /*display: flex;*/
        align-items: center;
        justify-content: center;
    }
</style>